/*
 * @Author: funlee
 * @Email: i@funlee.cn
 * @Date: 2019-06-27 17:32:36
 * @Description: 挖掘查询-搜索结果
 */
@import "@/assets/style/global.scss";

.EQuery-result {
    position: relative;
    width: 100%;
    $rightWidth: 260px;
    $padding: 50px;

    .wrapper {
        width: calc(100% - #{($rightWidth + $padding) * 2});
        margin: 0 auto;
        padding-top: 30px;
        overflow: hidden;

        .top-search {
            width: 100%;
            $height: 50px;
            position: relative;

            .search-text {
                height: $height;
                line-height: $height;
                text-indent: 20px;
                color: $gray;
                font-size: 16px;
                width: 100%;
                background: #323947;
                border-radius: 4px;
                border: none;
                outline: none;
            }

            .btn {
                display: block;
                position: absolute;
                top: 0;
                right: 10px;
                font-size: 16px;
                color: $gray;
                height: $height;
                line-height: $height;
                background: url(../images/search-icon.png) no-repeat left center;
                background-size: auto 44%;
                cursor: pointer;
                text-indent: 30px;
            }
        }

        .filter{
            width: 100%;
            margin-top: 20px;
            $mHeight: 20px;
            .filter-btn{
                color: $grayLight;
                cursor: pointer;
                display: inline-block;
                height: $mHeight;
                line-height: $mHeight;
                position: relative;
                z-index: 100;

                .allow-icon {
                    position: relative;
                    top: 1px;
                    left: 10px;
                    display: inline-block;
                    transform: rotate(90deg);
                    width: 8px;
                    height: 13px;
                    background: url(../images/allow_right_icon.png) no-repeat center;
                    transition: all 0.5s ease-out 0s;
                }
                &.active{
                    .allow-icon{
                        transform: rotate(-90deg);
                    }
                }
            }
            .filter-lists {
                display: flex;
                justify-content: space-between;
                position: relative;
                padding-top: calc(#{$mHeight} + 30px);
                margin-top: -$mHeight;
                .reset-btn {
                    cursor: pointer;
                    position: absolute;
                    top: 0;
                    right: 0;
                    border: 1px solid $borderColor;
                    text-align: center;
                    display: inline-block;
                    border-radius: 4px;
                    color: $gray;
                    padding: 6px 20px;
                }

                .ant-select {
                    color: $gray;

                    .ant-select-selection {
                        background-color: transparent;
                        border: 1px solid $borderColor;
                    }

                    .ant-select-arrow {
                        color: $blue;
                    }
                }

                .ant-input {
                    background: transparent;
                    border: 1px solid $borderColor;
                    color: $gray;
                }

                .ant-input-search-icon {
                    color: $gray;
                }

            }
        }
        .sort-wrapper{
            width: 100%;
            border-bottom: 1px solid #8893A7;
            display: flex;
            justify-content: space-between;
            height: 40px;

            margin-top: 20px;
            .sort-types{
                span{
                    display: inline-block;
                    text-align: center;
                    padding: 0 20px;
                    line-height: 39px;
                    cursor: pointer;
                    &.active{
                        border-bottom: 2px solid $blue;
                    }
                }
            }
            .count{
                color: $blue;
                padding: 0 10px;
            }
            .default-btn {
                cursor: pointer;
                border: 1px solid $borderColor;
                text-align: center;
                display: inline-block;
                border-radius: 4px;
                color: $gray;
                padding: 6px 20px;
                margin-left: 20px;
            }
        }

        .lists-data{
            width: 100%;
            margin-top: 30px;
            max-height: 520px;
            overflow-y: auto;
            .list-inner{
                background: #2c303d;
                padding: 10px 0;
                display: flex;
                width: 100%;
                margin-bottom: 20px;
                .light-text{
                    color: $grayLight;
                }
                .list-left{
                    width: 110px;
                    text-align: center;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    .logo{
                        width: 50px;
                        height: 60px;
                        margin: 20px auto 0;
                    }
                    .name{
                        color: $blue;
                        margin-top: 10px;
                        cursor: pointer;
                    }
                }
                .list-center{
                    flex: 1;
                    overflow: hidden;
                    line-height: 30px;
                    p{
                       overflow: hidden;
                       white-space: nowrap;
                       text-overflow: ellipsis;
                    }
                    span{
                        &:first-child{
                            width: 120px;
                        }
                    }
                }
                .list-right{
                    width: 150px;
                    text-align: center;
                    .score{
                        color: $yellow;
                        font-size: 48px;
                        margin-bottom: 20px;
                    }
                    .focus-btn{
                        cursor: pointer;
                        display: inline-block;
                        border: 1px solid $blue;
                        text-align: center;
                        display: inline-block;
                        border-radius: 4px;
                        color: $blue;
                        padding: 6px 20px;
                        margin-top: 30px;
                        &.active{
                            background: #465270;
                            color: $grayLight;
                            border: none;
                        }
                    }

                }
            }
        }
    }

    .table-pagination {
        text-align: right;
        margin-top: 20px;
    }

    .right-lists {
        position: absolute;
        top: 0;
        right: 0;
        height: calc(100vh - 70px);
        background: #2c303d;
        padding: 0 10px;
        width: $rightWidth;
        $titleHeight: 50px;
        $footBtnHeight: 40px;
        $listHeight: calc(100vh - 80px - 2 * (#{$titleHeight + $footBtnHeight}));
        .right-lists-item{
            width: 100%;
            padding: 0 20px;
            &:first-child{
                border-bottom: 1px solid $borderColor;
            }
            &.active{
                .lists{
                    height: $listHeight;
                }
                .foot-btn{
                    transform: rotate(180deg);
                }
            }
            .lists{
                width: 100%;
                height: 0;
                overflow: hidden;
                transition: all 0.5s ease-in-out 0s;
                li{
                    margin-bottom: 12px;
                    line-height: 28px;
                    p{
                        &:first-child{
                            color: $grayLight;
                        }
                    }
                }
            }
            .title{
                color: $grayLight;
                height: $titleHeight;
                line-height: $titleHeight;
                text-align: center;
            }
            .foot-btn{
                width: 100%;
                height: $footBtnHeight;
                background: url(../images/fold-btn.png) no-repeat center;
                cursor: pointer;
            }
        }

    }
}


.ant-select-dropdown {
    background-color: #27314a;
    border: 1px solid $borderColor;

    .ant-select-dropdown-menu-item {
        color: $gray;

        &:hover {
            background-color: #262b38;
            color: $blue;
        }
    }

    .ant-select-dropdown-menu-item-selected {
        background-color: #262b38;
        color: $blue;
    }

    .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) {
        background-color: #262b38;
        color: $blue;
    }
}


